<template>
    <div class="table_box">
        <el-table v-bind="$attrs" ref="tableRef">
            <el-table-column type="selection" />
            <el-table-column label="商品信息" min-width="260">
                <template #default="{ row }">
                    <div class="goods_msg">
                        <div class="goods_left_box">
                            <el-image class="goods_img" :src="row.materialSrc[0]?.materialSrc" />
                            <div v-if="row.isShow === 2" class="show_rule_msk">不公开</div>
                        </div>
                        <div class="goods_text">
                            <div class="goods_text_top_box">
                                <div class="goods_name">
                                    <el-tooltip class="item" effect="dark" :content="row.goodsName" placement="top">
                                        <span @click="toGoodsPreview(row)">{{ row.goodsName }}</span>
                                    </el-tooltip>
                                </div>
                                <div v-if="row.isErp" class="erp_tag">ERP</div>
                            </div>
                            <div class="goods_code">{{ row.goodsNo }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商品价格" prop="goodsMinPrice" sortable="custom" min-width="150">
                <template #default="{ row }"> ￥{{ floatDivide(row.goodsMinPrice, 100) }} </template>
            </el-table-column>
            <el-table-column label="商品类目" min-width="150">
                <template #default="{ row }">
                    <div class="class_name">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            :content="row.classNameHover"
                            placement="top"
                            :disabled="!row.classNameHover">
                            <span>{{ row.className || '-' }}</span>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商品分组" prop="categoryNameText" showOverflowTooltip min-width="150">
            </el-table-column>
            <el-table-column label="库存" prop="goodsStock" sortable="custom" min-width="100" />
            <el-table-column label="销量" prop="goodsSalesNumber" sortable="custom" min-width="100" />
            <el-table-column label="创建时间" prop="createdAt" sortable="custom" width="200" />
            <el-table-column
                :label="columnLabel[props.currentTab]"
                :prop="columnProp[props.currentTab]"
                sortable="custom"
                width="200" />

            <el-table-column label="操作" :width="btnWidth" fixed="right">
                <template v-slot="scope">
                    <el-button v-auth="'commodity:edit'" class="table-btn" size="small" @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm
                        placement="top"
                        width="200"
                        cancel-button-text="取消"
                        confirm-button-text="确定"
                        :icon="WarningFilled"
                        icon-color="#faad14"
                        :title="`确定要${scope.row.onSale == 2 ? '上架' : '下架'}该商品吗？`"
                        @confirm="toggleStatus(scope.row)">
                        <template #reference>
                            <el-button v-auth="'commodity:shelves'" class="table-btn" size="small">
                                {{ scope.row.onSale == 2 ? '上架' : '下架' }}
                            </el-button>
                        </template>
                    </el-popconfirm>
                    <el-popover
                        popper-class="custom-skill-popover not-close"
                        placement="top"
                        :visible="scope.row.id === openPopoverId"
                        width="400">
                        <template #reference>
                            <el-button
                                v-auth="'commodity:promote'"
                                class="table-btn"
                                size="small"
                                @click="showQrHandler(scope.row)">
                                推广
                            </el-button>
                        </template>
                        <SpreadBox
                            v-if="scope.row.id === openPopoverId"
                            :path="path"
                            :params="params"
                            :downloadName="downloadName"
                            :popoverFn="popoverVisibleHandler" />
                    </el-popover>
                    <el-popconfirm
                        v-if="props.currentTab == 3"
                        placement="top"
                        width="200"
                        cancel-button-text="取消"
                        confirm-button-text="确定"
                        :icon="WarningFilled"
                        icon-color="#faad14"
                        title="确定要删除该商品吗？"
                        @confirm="toggleDelete(scope.row)">
                        <template #reference>
                            <el-button v-auth="'commodity:delete'" class="table-btn" size="small"> 删除 </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import SpreadBox from '@/components/SpreadBox.vue';
import { ref, computed } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import request from '@/request';
import { floatDivide } from '@/commons/utils';
import store from '@/store';

const props = defineProps({
    currentTab: { type: String, default: '' }
});
const emit = defineEmits(['change']);

const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
const auth = [
    permissions.has('commodity:edit'),
    permissions.has('commodity:shelves'),
    permissions.has('commodity:promote'),
    permissions.has('commodity:delete')
];
// 根据权限按钮个数动态设置列的宽度
const btnWidth = computed(() => {
    let authLength = auth.filter(item => item).length;
    let width = authLength * 70 + (props.currentTab != '3' ? -70 : 0);
    return width < 80 ? 80 : width;
});
const router = useRouter();

const columnLabel = {
    1: '上架时间',
    2: '售罄时间',
    3: '变更时间'
};
const columnProp = {
    1: 'upShelfAt',
    2: 'soldOutAt',
    3: 'updatedAt'
};

const toggleStatus = async row => {
    const { onSale, id } = row;
    const text = onSale == 1 || onSale == 3 ? '下架' : '上架';
    let params = { goodsId: id, onSale: onSale == 2 ? 1 : 2 };
    let res = await request('shelfGoodsServ', params);
    if (res.code === 0) {
        ElMessage.success(`${text}成功`);
        emit('change');
    } else {
        ElMessage.error(res.msg);
    }
};
const toggleDelete = async row => {
    let params = { goodsId: row.id };
    let res = await request('deleteGoodsServ', params);
    if (res.code === 0) {
        emit('change');
        ElMessage.success('删除成功');
    } else {
        ElMessage.error(res.msg);
    }
};

const edit = row => {
    router.push({
        path: '/commodity/list/pub',
        query: {
            id: row.id,
            goodsId: row.goodsNo,
            type: 'edit',
            __title__: 'editTitle'
        }
    });
};

let openPopoverId = ref('');
const popoverVisibleHandler = () => {
    openPopoverId.value = null;
};
/**
 * 显示二维码
 * @param {*} experienceUrl
 */
let path = ref();
let params = ref();
let downloadName = ref();
const showQrHandler = async row => {
    path.value = 'pages-cart/good/index';
    params.value = `goodsId=${row.id}&shopId=${row.shopId}`;
    downloadName.value = row.goodsName;
    openPopoverId.value = row?.id;
};
const toGoodsPreview = v => {
    window.open(`${location.origin}/commodity/list/preview?id=${v.id}`);
};
</script>
<style lang="scss">
.custom-skill-popover {
    padding: 0 !important;
}
</style>
<style lang="scss" src="./table.scss" scoped></style>
